<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户聊天</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue@2.7.10.js"></script>
    <script src="/element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="app">

    <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
        <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
        >
            <div v-for="(notification, index) in item.content" :key="index">
                <el-alert
                        :title="users.find(item => item.id === notification.fromId).name"
                        :type="notification.toId === 0 ? 'success' : 'warning'"
                        :description="notification.content">
                </el-alert>
            </div>

            <el-input v-model="input" placeholder="请输入内容" style="display:inline-block;width: 80%"></el-input>
            <el-button type="success" icon="el-icon-check" circle @click="send(item.userId)" style="display:inline-block"></el-button>
        </el-tab-pane>
    </el-tabs>
</div>
</body>

<script>
    new Vue({
        el: "#app",
        mounted() {
            axios.get('/user').then(res => {
                if (res.data.code === 1) {
                    this.users = res.data.data;
                    this.users.push({
                        id: 0,
                        name: '系统回复',
                    });
                }
            });
            setInterval(()=>{
                axios.get('/notification/server').then(res => {
                    if (res.data.code === 1) {
                        var list = res.data.data;
                        if (list.length > 0) {
                            list.forEach(notification => {
                                this.addTab(notification);
                            });
                        }
                    }
                });
            },5000)

        },
        methods: {
            addTab(notification) {
                const title = this.users.find(item => item.id === notification.fromId).name;
                const find = this.editableTabs.find(item => item.title === title);
                if(find) {
                    find.content.push(notification);
                }else {
                    let newTabName = ++this.tabIndex + '';
                    this.editableTabs.push({
                        title: title,
                        name: newTabName,
                        content: [
                            notification
                        ],
                        userId: notification.fromId
                    });

                }
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            send(index){
                this.editableTabs[index-1].content.push({
                    content:this.input,
                    fromId:0,
                    toId:this.editableTabs[index-1].userId
                });
                axios.post('/notification/send',{
                    content:this.input,
                    fromId:0,
                    toId:this.editableTabs[index-1].userId
                }).then(res => {
                    if (res.data.code === 1) {
                        this.input = '';
                    }
                });
            }
        },
        data: function () {
            return {
                users : [],
                input: '',
                editableTabsValue: '1',
                editableTabs: [],
                tabIndex: 0
            }
        }
    })
</script>
</html>